<template>
  <div>
    <swiper class="my-swipe" :autoplay="true" indicator-color="white">
      <swiper-item v-for="item in banner.list" :key="item.id">
        <image  mode="widthFix" :src="item.image" @click="viewDetail(item)" />
      </swiper-item>
    </swiper>
    <notice></notice>
    <rank :currency="currency"></rank>
    <menu-pic></menu-pic>
    <markets></markets>
  </div>
</template>

<script>

import notice from './components/notice'
import rank from './components/rank'
import menuPic from './components/menuPic'
import markets from './components/markets'


import { SET_TRANSITION_NAME, SET_LANG } from '@/constants/mutation-types'
import { CURRENCIES, THIRD_LOGIN_ENABLED } from '@/constants/global'
import { currencyStorage, langStorage } from '@/utils/storage'

export default {
  layout: 'navigation',
  components: {
    notice,
    rank,
    menuPic,
    markets
  },
  data() {
    return {
        transitionName: '',
        initInfo: {},
        banner: [],
        currency:{}, // 货币设置，
        locale: langStorage.get(),
        thirdLoginEnabled: THIRD_LOGIN_ENABLED,
    }
  },
  onLoad() {
    this.currency = CURRENCIES[Object.keys(CURRENCIES)[1]]
    this.getBanner()
  },
  methods: {
    getBanner(){
      var that=this
      this.socketUser.AjaxRequest(this.API.BANNER,
      {

      }, function(res) {
      	console.log('lunbotu',res)
        that.banner=res.data
      },false)
    },
    viewDetail(item) {
      uni.navigateTo({
        url:`/pages/common/article?params=${JSON.stringify({ url: item.url, title:item.title })}`
      })
    }
  }
}
</script>

<style scoped lang="less">
.my-swipe {
  height: 46vw;
  image{
    width: 100%;
  }
}
.van-swipe-item {
  font-size: 0;
}
</style>
